<template>
  <div>
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model="active">
      <van-tab title="未完成">
        <div v-for="(item,index) in datas" :key="index" class="box-ding">
          <van-panel :title="'订单号：'+item.rand" :desc="'时间：'+item.timer" status="￥38.0">
            <div>
              <van-cell :title="'您的位置：'+item.addrs" icon="location" />
              <van-cell :title="'您去的目的地：'+item.what" icon="smile" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="14" span="12">
                  <van-button @click="vstat(index)" size="small" type="danger">取消订单</van-button>
                  <van-button @click="vpush(index)" size="small" type="info">完成订单</van-button>
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div v-show="sdsd1" class="box_center">暂时没有数据！！</div>
      </van-tab>
      <van-tab title="已完成">
        <div v-for="(item,index) in oked" :key="index" class="box-ding">
          <van-panel :title="'订单号：'+item.rand" :desc="'时间：'+item.timer" status="￥38.0">
            <div>
              <van-cell :title="'您的位置：'+item.addrs" icon="location" />
              <van-cell :title="'您去的目的地：'+item.what" icon="smile" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="19" span="12">
                  <van-button disabled size="small" type="danger">已完成✔</van-button>
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div v-show="sdsd2" class="box_center">暂时没有数据！！</div>
      </van-tab>
      <van-tab title="已取消">
        <div v-for="(item,index) in reced" :key="index" class="box-ding">
          <van-panel :title="'订单号：'+item.rand" :desc="'时间：'+item.timer" status="￥38.0">
            <div>
              <van-cell :title="'您的位置：'+item.addrs" icon="location" />
              <van-cell :title="'您去的目的地：'+item.what" icon="smile" />
            </div>
            <template #footer>
              <van-row>
                <van-col offset="19" span="12">
                  <van-button disabled size="small" type="danger">已取消✔</van-button>
                </van-col>
              </van-row>
            </template>
          </van-panel>
        </div>
        <div v-show="sdsd3" class="box_center">暂时没有数据！！</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  data() {
    return {
      active: 0,
      sdsd1: false,
      sdsd2: false,
      sdsd3: false
    };
  },
  computed: {
    ...mapState(["datas"]),
    ...mapState(["reced"]),
    ...mapState(["oked"])
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    vpush(index) {
      const _this = this;
      setTimeout(function() {
        _this.$router.push("/eval");
      }, 2000);
      setTimeout(function() {
        _this.$store.commit("setoked", _this.$store.state.datas[index]);
        _this.$store.state.datas.splice(index, 1);
      }, 3000);
    },
    vstat(index) {
      this.$store.commit("setreced", this.$store.state.datas[index]);
      this.$store.state.datas.splice(index, 1);
      this.$router.push("/cancel");
    }
  },
  mounted() {
    if (this.$store.state.datas.length === 0) {
      this.sdsd1 = true;
    } else {
      this.sdsd1 = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.box-ding {
  width: 90%;
  height: 100%;
  box-shadow: 0 0 3px 0 black;
  margin: 20px auto;
  overflow: hidden;
}
.box_center {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: #666;
  margin-top: 50px;
}
</style>